import * as React from 'react';
import { Table, Modal } from 'antd'
import { connect } from 'dva';
import * as classnames from 'classnames'
import { UserRecord } from '../../models';
import { pure, Logger } from '../../utils';
import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';

// css
const styles = require<any>('./List.less');

// logger
const logger = Logger.get('routes_user_list');

// 国际化
const messages = defineMessages({
  userId: {
    id: 'User.list.userId',
    defaultMessage: 'User Id',
    description: '用户列表的列名:userId'
  },
  name: {
    id: 'User.list.name',
    defaultMessage: 'Name',
    description: '用户列表的列名:name'
  }
});

class UserTable extends Table<UserRecord> {}

class UserColumn extends Table.Column<UserRecord> {}

interface ListProps {
  list: Array<UserRecord>,
  total: number,
  intl: any
}

const List: React.StatelessComponent<ListProps> = ({ list, total, intl }) => {
  logger.info('UserList');
  return (
    <div>
      <UserTable
        className={classnames({ [styles.table]: true })}
        bordered
        dataSource={list}
        pagination={false}
        rowKey={(record: any) => record.id}
      >
        <UserColumn
          key="userId"
          title={intl.formatMessage(messages.userId)}
          dataIndex="userId"
          width="10%"
        />
        <UserColumn
          key="name"
          title={intl.formatMessage(messages.name)}
          dataIndex="name"
        />
      </UserTable>
    </div>
  );
}

export default pure(injectIntl(List));
